<template>
  <div class="title">
    {{ title }}＞
  </div>
  <div class="content-show-area">
    <div v-for="(item, index) in menuInfo" :key="index">
      <a :href="item.url">
        <img :src="item.imgUrl" alt="" />
      </a>
    </div>
  </div>
</template>

<script setup>
  const props = defineProps({
    title: {
      type: String,
      default: "默认标题"
    },
    menuInfo: {
      type: Array,
      default: [{ imgUrl: "", url: "" }]
    }
  })
</script>

<style scoped>
.title {
  width: 1226px;
  height: 30px;
  cursor: pointer;
  user-select: none;
  margin: 20px auto 10px;
  font-size: 22px;
  font-family: 'Courier New', Courier, monospace;
}

.content-show-area {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 1226px;
  margin: 10px auto 30px;
  height: 614px;
}

.content-show-area div {
  width: 234px;
  height: 300px;
  border-radius: 10px;
  overflow: hidden;
}
@keyframes card {
  50% {
    filter: brightness(1.2);
  }
}
.content-show-area div:hover {
  transform: scale(1.02);
  box-shadow: 0 0 10px #888;
  animation: card 0.3s;
  filter: contrast(2)
}

.content-show-area div:nth-child(n + 6) {
  margin-top: 14px;
}

.content-show-area div img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>